<template>
    <div class="SeachView">
        <div class="Seachheader">
            <van-nav-bar title="标题" left-arrow>
                <template #left>
                    <van-icon name="arrow-left" @click="back" color="black" size="20" />
                </template>
                <template #right>
                    <van-button type="danger" size="mini" @click="seachPro" v-show="isflag">搜索</van-button>
                </template>
                <template #title>
                    <van-search v-model="value" :placeholder="seachPla" shape="round" :autofocus="autoFocus" :clearable="false"  @focus="onFocus" >
                        <template #left-icon>
                            <van-icon name="search" color="black" size="20" />
                        </template>
                    </van-search>
                </template>
            </van-nav-bar>
        </div>
        <div class="SeachMain" v-show="isflag">
            <!-- 最近搜索 -->
            <div class="recently" v-if="recentlyList.length">
                <div class="title">
                    <h3>最近搜索</h3>
                    <van-icon name="delete-o" size="20" @click="delList" color="#555" />
                </div>
                <ul class="receList">
                    <li v-for="item in recentlyList" :key="item.wordid" @click="checkBut(item.keyword)">{{ item.keyword }}</li>
                </ul>
            </div>
            <!-- 热门搜索 -->
            <div class="hot recently" v-if="hotList.length">
                <div class="title">
                    <h3>热门搜索</h3>
                    <span>隐藏</span>
                </div>
                <ul class="receList">
                    <li v-for="item in hotList" :key="item.wordid" @click="checkBut(item.keyword)">{{ item.keyword }}</li>
                </ul>
            </div>
        </div>
        <div class="seachList"  v-if="!isflag">
            <nav class="seachNav">
                <van-dropdown-menu active-color="#e54847">
                    <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
                <div>销量</div>
                <van-dropdown-menu active-color="#e54847">
                    <van-dropdown-item v-model="value2" :options="option2" />
                </van-dropdown-menu>
                <div>筛选<van-icon name="filter-o" size="14" color="#555" /></div>
            </nav>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" >
                <pro-list :proList="prolist"></pro-list>
            </van-list>
        </div>
    </div>
</template>
<style lang="stylus">
.SeachView
    .van-nav-bar__content
        height 2.75rem
    .van-search .van-cell
        padding .1875rem
    .van-search
        padding 0
    .van-nav-bar__title
        max-width 70%
        flex 1
    .van-nav-bar__right
        padding 0 .5rem
    .van-dropdown-menu__bar
        box-shadow none
    .van-ellipsis
        color #e54847
    .van-dropdown-menu__title::after
        border-color transparent transparent #e54847 #e54847
</style>
<style lang="stylus" scoped>
.seachList
    .seachNav
        padding 0 1.25rem
        display flex
        align-items center
        border-bottom 1px solid rgb(235,235,235)
        >div
            flex 1
            text-align center
            font-size .875rem
.SeachMain
    padding 1.25rem
    display flex
    flex 1
    flex-direction column
    .recently
        display flex
        flex-direction column
        .title
            display flex
            justify-content space-between
            align-items center
        .receList
            display flex
            flex-wrap wrap
            padding-top .625rem
            padding-bottom 1.25rem
            li
                padding .1875rem .9375rem
                background-color rgb(245,245,245)
                margin-bottom .625rem
                border-radius .3125rem
                margin-right .625rem
                font-size .875rem
                color #686868
.van-search
    padding 0
    .van-cell
        padding .1875rem
.SeachView
    flex 1
    display flex
    height: 100%
    flex-direction column
    .van-nav-bar__title
        max-width: 80%;
        .van-search
            font-size .75rem
            background-color rgba(0,0,0,0)
</style>
<script>
import Vue from 'vue'
import proList from '@/components/proList.vue'
import { getHotWord, getSeach } from '@/api/Seach.js'
import { NavBar, Button, Search, Icon, Dialog, DropdownMenu, DropdownItem } from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Dialog)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
export default {
  data () {
    return {
      value: '',
      autoFocus: false,
      recentlyList: [],
      hotList: [],
      seachPla: '',
      number: 0,
      num: 2,
      isflag: true,
      loading: false,
      finished: false,
      routerGo: 0,
      prolist: [],
      value1: 0,
      value2: 'a',
      option1: [{ text: '综合', value: 0 }, { text: '最新上架', value: 1 }, { text: '价格最低', value: 2 }, { text: '价格最高', value: 3 }, { text: '评价最多', value: 4 }],
      option2: [{ text: '211限时达', value: 'a' }, { text: '有货优先', value: 'b' }, { text: '货到付款', value: 'c' }, { text: '京东国际', value: 'd' }, { text: 'PLUS专享', value: 'e' }, { text: '促销商品', value: 'f' }]
    }
  },
  methods: {
    seachPro () {
      this.value = this.value ? this.value : this.seachPla
      const index = this.recentlyList.findIndex(item => item.keyword === this.value)
      if (index === -1) {
        this.number = 1
      } else {
        this.number = this.recentlyList[index].num + 1
        this.recentlyList.splice(index, 1)
      }
      if (this.recentlyList.length >= 12) {
        this.recentlyList.pop()
      }
      this.recentlyList.unshift({ keyword: this.value, num: this.number, wordid: 'scid_' + new Date().getTime() })
      this.setLocalStorage(this.recentlyList)
      // 点击搜索获取接口数据第一页
      getSeach({ keyword: this.value, count: 1 }).then((res) => {
        this.prolist = res.data
        this.isflag = false
      })
    },
    checkBut (val) {
      this.value = val
      this.seachPro()
    },
    // 获取本地存储中的历史搜索记录
    getLocalStorage () {
      if (localStorage.getItem('recentlyList')) {
        this.recentlyList = JSON.parse(localStorage.getItem('recentlyList'))
      } else {
        this.recentlyList = []
      }
    },
    // 设置本地存储的历史记录
    setLocalStorage (obj) {
      localStorage.setItem('recentlyList', JSON.stringify(obj))
    },
    // 清空历史记录
    delList () {
      Dialog.confirm({ message: '确定要清空吗？' })
        .then(() => {
          // on confirm
          localStorage.removeItem('recentlyList')
          this.recentlyList = []
        })
        .catch(() => {
          // on cancel
          console.log('取消清空')
        })
    },
    // 切换显示
    onFocus () {
      this.isflag = true
    },
    // 上拉加载更多数据
    onLoad () {
      this.loading = true
      getSeach({ count: this.num, keyword: this.value }).then((res) => {
        this.loading = false
        if (res.data) {
          this.prolist = [...this.prolist, ...res.data]
          this.num++
        } else {
          this.finished = true
        }
      })
    },
    back () {
      if (this.isflag) {
        this.$router.go(-1)
      } else {
        this.isflag = true
      }
    }
  },
  mounted () {
    getHotWord().then((res) => {
      this.hotList = res.data
      this.seachPla = res.data[0].keyword
    })
    this.getLocalStorage()
    this.value = this.$route.params.searcName
    if (this.value) {
      this.seachPro()
      this.autoFocus = false
    }
  },
  components: {
    proList
  }
}
</script>
